<template>
  <div class="room-list">
    <div
      class="room-items"
      @click="clickEvent"
    >

      <img
        v-if="room.avatar"
        :src='room.avatar'
        alt=""
      >
      <img
        v-else
        src="../../../../../assets/avatar2.svg"
        alt=""
      >
      <span>{{room.name}}</span>
    </div>
  </div>

</template>

<script>
import { joinRoomAPI, updateRoomIsInRoomAPI } from "../../../../../api/socket";
import { mapState } from "vuex";
export default {
  data() {
    return {
      user_id: this.$store.state.users.userInfo.id,
      page: 1,
      pageSize: 15,
    };
  },

  props: ["room", "isJoinRoom"],
  methods: {
    toChat() {
      this.$router.push("/my/chat/chatbox");
    },
    async clickEvent() {
      this.toChat();
      this.$emit("currentRoomId", this.room.id);
      this.$bus.$emit("clickScroll");
      // 这里用了isJoinRoom 来区别是自己创建的房间还是自己加入的房间 因为渲染表不同 数据 不同
      // 如果 是 isJoinRoom 则房间ID为  this.room.room_id
      if (this.isJoinRoom) {
        console.log("rr加入的群---", this.room);
        // 点击这个群聊即选中这个群聊 将当前群聊信息传过去 store中
        const res = await updateRoomIsInRoomAPI(this.room.room_id);
        if (res.status == 0) {
          this.$socket.emit("joinRoom", this.room.room_id);
          // 将这个房间id传给父组件渲染该群用户
          this.$emit("currentRoomId", this.room.room_id);

          const res2 = await joinRoomAPI({
            room_id: this.room.room_id,
            avatar: this.room.avatar,
            name: this.room.name,
            author_id: this.room.author_id,
          });

          const currentRoomdata = {
            author_name: this.room.author_name,
            is_delete: this.room.is_delete,
            name: this.room.name,
            avatar: this.room.avatar,
            id: this.room.room_id,
            info: this.room.info,
            moment: this.room.create_moment,
            number: this.room.number,
            type: 0,
            user_id: this.room.author_id,
          };
          this.$store.dispatch("initCurrentRoomInfo", currentRoomdata);
          // 触发获取当前群聊的消息
          this.$store.dispatch("getMessageList", {
            room_id: this.room.room_id,
            page: this.page,
            pageSize: this.pageSize,
          });
        }
        console.log(this.room.user_id);
      } else {
        console.log("rroom0-------------------", this.room);
        // 点击这个群聊即选中这个群聊 将当前群聊信息传过去 store中
        const res = await updateRoomIsInRoomAPI(this.room.id);
        if (res.status == 0) {
          console.log("rooomId", this.room.id);
          this.$socket.emit("joinRoom", this.room.id);
          // const res = await updateRoomIsInRoomAPI();
          //将当前房间ID传给父组件

          this.$emit("currentRoomId", this.room.id);
          console.log(this.room.user_id);
          console.log(this.user_id);

          const res2 = await joinRoomAPI({
            room_id: this.room.id,
            avatar: this.room.avatar,
            name: this.room.name,
            author_id: this.room.user_id,
          });

          this.$store.dispatch("initCurrentRoomInfo", this.room);
          // 触发获取当前群聊的消息
          this.$store.dispatch("getMessageList", {
            room_id: this.room.id,
            page: this.page,
            pageSize: this.pageSize,
          });
        }
      }
    },
  },

  computed: {},

  mounted() {
    console.log("rroom0-------------------", this.room);
  },
};
</script>
 
 <style lang="less" scoped>
// 选择房间
.room-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.room-items {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: 90%;
  padding: 10px;
  cursor: pointer;
}
.room-items > img {
  width: 20%;
  border: 1px solid;
}
.room-items > span {
  width: 80%;
  font-size: 1.2em;
  margin-left: 20px;
  border-bottom: 1px solid #ccc;
  padding-bottom: 12px;
}
</style>